<template>
  <div class="exercise-header">
    <div class="header-left">
      <el-button @click="$emit('go-back')" type="text">
        <el-icon><Back /></el-icon>
        返回
      </el-button>
      <h2 class="exercise-title">{{ title }}</h2>
      <el-tag v-if="isPublic" type="success" size="small" class="visibility-tag">公开</el-tag>
      <el-tag v-else type="info" size="small" class="visibility-tag">私有</el-tag>
    </div>
    <div class="header-right">
      <el-button 
        type="primary" 
        @click="$emit('start-exercise')" 
        :disabled="!hasExercises"
        v-if="!isCompleted"
      >
        <el-icon><Reading /></el-icon>
        开始练习
      </el-button>
      <el-button 
        type="success" 
        @click="$emit('start-exercise')" 
        :disabled="!hasExercises"
        v-else
      >
        <el-icon><Reading /></el-icon>
        重新练习
      </el-button>
    </div>
  </div>
</template>

<script>
import { Back, Reading } from '@element-plus/icons-vue'

export default {
  name: 'ExerciseHeader',
  components: {
    Back,
    Reading
  },
  props: {
    title: {
      type: String,
      default: '未命名练习'
    },
    isPublic: {
      type: Boolean,
      default: false
    },
    hasExercises: {
      type: Boolean,
      default: false
    },
    isCompleted: {
      type: Boolean,
      default: false
    }
  },
  emits: ['go-back', 'start-exercise']
}
</script>

<style scoped>
.exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exercise-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  max-width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visibility-tag {
  margin-left: 8px;
}

.header-right {
  display: flex;
  gap: 12px;
}
</style> 